/* eslint-disable no-console */
/* eslint-disable no-console */
<template>
  <div>
      <van-nav-bar
        title="用户登录"
        left-text="返回"
        left-arrow
        @click-left="goBack"
      />
      <div class="login-panel">
        <van-field
          v-model="username"
          label="用户名"
          :error-message="usernameErrorMsg"
          left-icon="contact"
          icon ="clear"
          placeholder="请输入用户名"
          @click-icon="username=''"
        />
        <div class="login-password">
          <van-field
            class="psw"
            v-model="password"
            v-if="idx==1"
            type = "password"
            left-icon="edit"
            label="密码"
            placeholder="请输入密码"
            icon = "eye"
            @click-icon="idx=-idx"
            :error-message="passwordErrorMsg"
          />
          <van-field
            class="psw"
            v-else-if="idx==-1"
            v-model="password"
            left-icon="edit"
            label="密码"
            placeholder="请输入密码"
            icon = "closed-eye"
            @click-icon="idx=-idx"
            :error-message="passwordErrorMsg"
          />
        </div>
        
        <div class="login-button">
          <van-button @click="loginAction"
                      :loading="openLoading" 
                      type="primary" 
                      size="large">登录</van-button>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {URL} from '@/servicesApi.config.js'
import { Toast } from 'vant'
export default {
  data() {
    return {
      username:'',
      password:'',
      idx:1,
      openLoading:false,  //是否开启用户登录的loading状态
      usernameErrorMsg:'',
      passwordErrorMsg:'',
    }
  },
  methods: {
    goBack(){
      this.$router.go(-1)
    },
    loginAction(){
      this.checkForm() && this.axiosLoginUser() 
    },
    axiosLoginUser(){ 
      this.openLoading=true;
      axios({
        url: URL.loginUser,
        method: 'post',
        data:{
          userName:this.username,
          password:this.password
        }
      })
      .then(response=>{
          // eslint-disable-next-line no-console
          console.log(response)
          if(response.data.code==200&&response.data.message==true){
            // eslint-disable-next-line no-unused-vars
            new Promise((resolve,reject)=>{
              localStorage.userInfo={userName:this.username}
              setTimeout(()=>{resolve()},500)
            }).then(()=>{
              Toast.success('登录成功')
              localStorage.setItem("user",this.username)
              this.$router.push('/main')
            }).catch(err=>{
              Toast.fail('用户登录状态保存失败')
              // eslint-disable-next-line no-console
              console.log(err)
            })
          }else if(response.data.message==false){
            Toast.fail('密码错误')
            this.openLoading=false
          }else{
            Toast.fail('用户名不存在')
            this.openLoading=false
          }
      })
      .catch((error)=>{
          console.log(error)
          Toast.fail('登录失败')
          this.openLoading=false
      })
    },
    //******表单验证方法
    checkForm(){
      let isCorrect = true;
      let reg = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,16}$/;
      if(this.username.length<5){
        this.usernameErrorMsg="用户名不能小于5"
        isCorrect = false
      }else{
        this.usernameErrorMsg=""
      }
      if((this.password.match(reg)==null)){
        this.passwordErrorMsg="密码不能少于6位,且不能为纯数字或纯字母"
        isCorrect = false
      }else{
        this.passwordErrorMsg=""
      }
      return isCorrect
    }
  },
  components: {

  },
  //页面一被初始化
  created(){
    if(localStorage.userInfo){
      Toast.success('你已经登录了')
      this.$router.push('/main')
    }
  }
}
</script>

<style lang="scss" scoped>
.login-panel{
  width: 18rem;
  border-radius: 5px;
  margin: 20px auto;
  padding-bottom: 80px; 
}
.login-panel /deep/ .van-field .van-cell__title{
  max-width: 60px
}
.login-button{
  width: 100%;
  margin: 10px auto;
}
</style>
